<template>
  <view class="settings-container">

		<view class="settings-list">
      <view class="setting-item" @click="goToPage('/pages/person/edit-profile/edit-profile')">
        <text>编辑个人资料</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
		</view>
    <view class="settings-list">
      <view class="setting-item" @click="navigateToAccount">
        <text>账号管理</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item">
        <text>隐私设置</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item">
        <text>通知设置</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item">
        <text>通用设置</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>
    <view class="settings-list">
      <view class="setting-item">
        <text>关于我们</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <view class="logout-btn" @click="handleLogout">
      <text>退出登录</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

const navigateToAccount = () => {
  uni.navigateTo({
    url: '/pages/person/account/account'
  })
}
const goToPage = (url) => {
  if (!url) return
  uni.navigateTo({
    url
  })
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
		uni.setStorageSync('token', null)
		uni.setStorageSync('userId', null)
		uni.setStorageSync('userName', null)
		uni.setStorageSync('loggedIn', false)
		
        uni.redirectTo({
          url: '/pages/starter/login/login'
        })
      }
    }
  })
}
</script>

<style>
.settings-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px;
}

.header {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.settings-list {
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
  overflow: hidden;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.logout-btn {
  margin-top: 30px;
  background-color: #fff;
  color: #ff2442;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  font-weight: 500;
}
</style>
